<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar bgColor="#7F5AFF" title="实名认证"></z-nav-bar>
		<view class="h-bg" v-if="auth_status">
			<image :src="imgUrl + 'static/web/img/shenhezhong.png'" mode="" v-if="auth_status == '1'"></image>
			<image :src="imgUrl + 'static/web/img/yichenggong.png'" mode="" v-if="auth_status == '2'"></image>
			<image :src="imgUrl + 'static/web/img/yijujue.png'" mode="" v-if="auth_status == '3'"></image>
		</view>
		<view class="main">
			<view class="biaodan-item" style="margin-top: 20rpx;">
				<view class="biaodan-item-tit">
					姓名
				</view>
				<view class="biaodan-item-con">
					<input class="input" v-model="formData.real_name" type="text" placeholder="请输入真实姓名" placeholder-class="yangshi" />
				</view>
			</view>
			<view class="biaodan-item">
				<view class="biaodan-item-tit">
					身份证号
				</view>
				<view class="biaodan-item-con">
					<input class="input" v-model="formData.id_card" type="idcard" placeholder="请输入身份证号" placeholder-class="yangshi" />
				</view>
			</view>
			
			<view class="biaodan-item" v-if="!isWxBrowser">
				<view class="biaodan-item-tit">
					联系电话
				</view>
				<view class="biaodan-item-con">
					<input disabled="true" class="input" v-model="formData.phone" type="number" placeholder="请输入电话号码" placeholder-class="yangshi" />
				</view>
			</view>
			
			<!-- 2022-05-09 修改开始 -->
			<!-- <view class="biaodan-item">
				<view class="biaodan-item-tit">
					<text>身份证图片</text>
				</view>
				<view class="grid col-3 grid-square flex-sub" style="margin-top: 32rpx;">
					<view class="bg-img" v-for="(item,index) in imgListss" :key="index" @tap="ViewImagesss" :data-url="imgListss[index]">
					 <image :src="imgListss[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImgsss(index)" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="addimg solids" @tap="ChooseImagesss" v-if="imgList.length<9">
						<text class='cuIcon-add' style="color: #7F5AFF;"></text>
					</view>
				</view>
			</view> -->
			<!-- 2022-05-09 修改结束 -->
			<view class="xieyi flex align-item">
				<checkbox value="" :checked="checked" style="transform:scale(0.7);"  class="round red" @click="checkChange"/>
				<view>
					我已阅读并同意 <text class="xieyi-tit" @click="goXieyi">《用户隐私协议》</text>
				</view>
			</view>
			<view class="btn flex" v-if="!auth_status || auth_status == '3'">
				<view class="btn-com btn-1" v-if="formData.real_name == '' || formData.id_card == ''">
					提交
				</view>
				<view class="btn-com btn-2" @click="submitForm" v-else>
					提交
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import {checkIdCard} from '@/plugins/utils.js'
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			uid: '', // 用户id
			imgListss: [], //相册
			imgListLeng: 0,
			// 表单数据
			formData: {
				real_name: '',
				phone: '', // 注册电话
				id_card: '', //身份证号
			},
			auth_status: '', // 审核状态
			checked: false, // 选中框默认false
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	//第一次加载
	onLoad() {
		// 检测授权
		this.judgeLogin(()=>{
			var userInfo = this.$store.state.userInfo;
			this.uid = userInfo.uid
			this.getMyReleaseData()
		});
	},
	//页面显示
	onShow() {
		
	},
	onReady() {
		
	},
	// 触底触发
	onReachBottom() {
		
	},
	//方法
	methods: {
		// 选中
		checkChange(){
			this.checked = !this.checked
		},
		// 查看用户协议
		goXieyi(){
			uni.navigateTo({
				url: '/pages/my/user_agreement/user_agreement?type=' + 1
			})
		},
		// 上传相册
		ChooseImagesss() {
			this.$http.urlImgUpload({
			     count: 9
			    }).then(e=>{
					this.imgListss = [...this.imgListss,...e]
			    })
		},
		ViewImagesss(e) {
			console.log(e.currentTarget.dataset.url)
			let arr = []
			let url = e.currentTarget.dataset.url
			this.imgListss.forEach((v,k)=>{
				arr.push(v)
			});
			uni.previewImage({
				urls: arr,
				current: url
			});
		},
		DelImgsss(i){
			this.imgListss.splice(i,1)
		},
		// 提交表单
		submitForm(){
			this.formData.uid   = this.uid
			// this.formData.photos = this.imgListss.join(',')
			
			if(!this.formData.real_name){
				uni.showToast({
					title: '请填写真实姓名',
					icon: 'none'
				})
				return false
			}
			var a = checkIdCard(this.formData.id_card)
			if(!a){
				uni.showToast({
					title: '请填写正确的身份证号码',
					icon: 'none'
				})
				return false
			}
			
			 if(!this.formData.phone && !this.isWxBrowser){
			 	uni.showToast({
			 		title: '请填写注册电话',
			 		icon: 'none'
			 	})
			 	return false
			 }
			 if (!this.$base.phoneRegular.test(this.formData.phone) && !this.isWxBrowser) {
			 	uni.showToast({
			 		title: '手机号格式不正确',
			 		icon: 'none'
			 	});
			 	return;
			 }
			 if(!this.checked){
			 	uni.showToast({
			 		title: '请先阅读并勾选用户隐私协议',
			 		icon: 'none'
			 	})
			 	return false
			 }
			let data = this.formData
			this.$http.post('api/ZhRealName/authentication',{
				...data
			}).then(res => {
					uni.showModal({
						title: '提示',
						content: '提交审核成功',
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				});
		},
		// 获取认证信息
		getMyReleaseData(){
			var that = this
			if(that.uid != ''){
				let uid = that.uid
				that.$http.get('api/ZhRealName/getAuthInfo',{
					uid
				}).then(res => {
						if(res){
							that.formData.phone = res.phone
							that.formData.real_name = res.real_name
							that.formData.id_card = res.id_card
							that.auth_status = res.auth_status
						}
					});
			}
		},
		// 清空表单
		eliminate(){
			this.formData.phone = ''
			this.formData.real_name = ''
			this.formData.id_card = ''
			this.auth_status = ''
		}
		
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
page {
	background-color: #FFFFFF;
}
.yangshi {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #BEC6D3;
}
.input {
	width: 100%;
}
</style>
<style lang="scss" scoped>

.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.xieyi {
	justify-content: center;
	margin-top: 60rpx;
	font-size: 28rpx;
	color: #6A6A7E;
	.xieyi-tit {
		color: #7F5AFF;
	}
}
.h-bg {
	width: 100%;
	height: 546rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.main {
	padding: 32rpx 30rpx 60rpx;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	margin-top: -24rpx;
	.biaodan-item {
		margin-bottom: 32rpx;
		.biaodan-item-tit {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000013;
			.piclen {
				color: #7F5AFF;
			}
		}
		.biaodan-item-con {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F9F9F9;
			.biaodan-item-con-right {
				width: 20rpx;
				height: 12rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.btn {
		width: 100%;
		justify-content: center;
		padding-top: 30rpx;
		.btn-com {
			width: 82%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.btn-1 {
			background: #BEC6D3;
		}
		.btn-2 {
			background: #7F5AFF;
		}
	}
}
</style>
